<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <link rel="stylesheet" href="node_modules/element-ui/lib/theme-chalk/index.css">
    <style>
        html,
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }

        section {
            width: 60%;
            margin: auto;
        }

        fieldset {
            border: 0;
        }
    </style>
</head>

<body>
    <section id="app" v-cloak>
        <h1 style="text-align: center;">用户信息注册</h1>
        <el-form ref="form" :model="userForm" :rules="rules" status-icon label-width="100px">
            <fieldset>
                <legend hidden>用户注册</legend>
                <el-form-item label="用户名：" prop="userName">
                    <el-input v-model="userForm.userName" placeholder="请输入英文或数字组合信息"></el-input>
                </el-form-item>
                <el-form-item label="昵称：">
                    <el-input v-model="userForm.nickName" placeholder="可以输入中文信息"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="userForm.password" placeholder="请输入密码" show-password></el-input>
                </el-form-item>
                <el-form-item label="重复密码：" prop="rePassword">
                    <el-input v-model="userForm.rePassword" placeholder="请重复输入密码" show-password></el-input>
                </el-form-item>
                <el-form-item label="性别：">
                    <el-switch v-model="userForm.sex" active-text="男" active-value="1" inactive-text="女"
                        inactive-value="2" active-color="#13ce66" inactive-color="#ff4949">
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input v-model="userForm.phoneNumber" placeholder="请输入电话号码"></el-input>
                </el-form-item>
                <el-form-item label="Email：" prop="email">
                    <el-input v-model="userForm.email" placeholder="请输入邮箱地址"></el-input>
                </el-form-item>
                <el-form-item label="生日：">
                    <el-date-picker v-model="userForm.birthday" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="爱好：">
                    <el-checkbox-group v-model="userForm.hobbies">
                        <el-checkbox v-for="hobby in hobbies" :key="hobby.code" :label="hobby.code">{{hobby.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="来自于：">
                    <el-select v-model="userForm.province" v-on:change="changeProvince">
                        <el-option v-for="province in provinces" v-bind:key="province.code" v-bind:value="province.code"
                            v-bind:label="province.name"></el-option>
                    </el-select>
                    <el-select v-model="userForm.city">
                        <el-option v-for="city in cities" v-bind:key="city.code" v-bind:value="city.code"
                            v-bind:label="city.name"></el-option>
                    </el-select>
                </el-form-item>
            </fieldset>
        </el-form>
        <nav colspan="3" style="text-align:center">
            <el-button type="reset" class="login-button">重置</el-button>
            <el-button type="submit" class="login-button" v-on:click="formSubmit">注册</el-button>
        </nav>
    </section>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/element-ui/lib/index.js"></script>
<script src="node_modules/axios/dist/axios.js"></script>
<script src="node_modules/qs/dist/qs.js"></script>
<script>
    new Vue({
        el: '#app',
        created() {
            this.provinceInit();
        },
        data() {
            return {
                userForm: {
                    userName: '',
                    nickName: '',
                    password: '',
                    rePassword: '',
                    sex: '1',
                    phoneNumber: '',
                    hobbies:[],
                    email: '',
                    birthday: '',
                    province: '请选择省份',
                    city: '请选择城市'
                },
                rules: {
                    userName: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        message: '请输入密码'
                    }, {
                        min: 6,
                        max: 20,
                        message: '请输入6位以上的密码'
                    }],
                    rePassword:[
                        {require:true,message:'必须再次输入密码'},
                    ],  //TODO:缺少密码重复校验
                    email: [{
                        required: true,
                        message: '请输入电子邮箱地址'
                    }, {
                        pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                        message: '输入的邮箱格式有误'
                    }]
                },
                provinces: [],
                cities: [],
                hobbies: [{code:1,name:'看书'}, {code:2,name:'唱歌'}, {code:3,name:'运动'}, {code:4,name:'编码'}, {code:5,name:'调bug'}],
            }
        },
        methods: {
            provinceInit: function () {
                axios.get('./data/province.json').then(response => {
                    if (response.data.result == 'ok') {
                        this.provinces = response.data.provinces;
                    }
                }).catch(err => console.log(err));
            },
            changeProvince: function () {
                let provinceCode = this.userForm.province;
                axios.get('./data/city.json').then(response => {
                    if (response.data.result == 'ok') {
                        this.cities = response.data.cities.filter(item => item.code.substring(0,
                            2) == provinceCode);
                    }
                }).catch(err => console.log(err));
            },
            formSubmit: function () {
                this.userForm.param='reg';
                const options = {
                    method: 'POST',
                    headers: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: this.userForm,
                    url:'http://127.0.0.1:9000/api/user',
                };
                axios(options).then(response=>{
                    console.log(response.data);
                }).catch(err=>console.log(err));
            }
        }
    });
</script>

</html>